import { FC, useEffect, useState } from 'react';
import { Tabs, Layout, Menu, Table, Pagination, Form, Input, Button, message } from 'antd'
import styles from './projectDetail.less';
import { IRouteComponentProps } from 'umi';
import { getTeacherInfo, getImgList, getContent, Postcomment, detailList } from '@/services/modules/students/projectKu';
import { ContentList, DetailList, TeacherInfo } from '@/utils/students/projectKu';
import { TrainingSyllabusList, ProjectResourcesList } from '@/utils/addindustry';
import { getProjectResources, getTrainingSyllabus, ResourcesItem } from '@/services';
import useStore from '@/context/useStore';
import { observer } from 'mobx-react-lite'
const { TabPane } = Tabs;
const { SubMenu } = Menu;
const { Content, Sider } = Layout;
const { TextArea } = Input;
const projectDetail: FC<IRouteComponentProps> = ({ location }) => {
    let { projectKu } = useStore();
    let id = location.query.id;
    let versionId = location.query.versionId;
    let [img, setimg] = useState('');
    let [info, setinfo] = useState<TeacherInfo>({} as TeacherInfo);
    let [details, setdetails] = useState<DetailList>({} as DetailList);
    let [content, setcontent] = useState<ContentList[]>([]);
    //分页
    let [pageNum, setPageNum] = useState(1);
    let [contentLen, setcontentLen] = useState(0)
    useEffect(() => {
        let id = location.query.id;
        let versionId = location.query.versionId;
        //右侧图片
        getImgList(id).then(ok => {
            setimg(ok.data.pictureUrl)
        });
        getTeacherInfo(id).then(ok => {
            setinfo(ok.data)
        });
        //标题
        detailList(versionId as any).then(ok => {
            setdetails(ok.data)
        })
    }, [id, versionId]);

    //评论数据
    async function get() {
        let queryParams: any = { pageNum: 1, pageSize: 10, id: id };
        queryParams = { ...queryParams, pageNum: pageNum, pageSize: 10, id: id };
        await getContent(queryParams).then(ok => {
            setcontent(ok.rows)
            setcontentLen(ok.total)
        });
    }
    useEffect(() => {
        get();
    }, [pageNum, id])
    const Demo = () => (
        <Tabs defaultActiveKey="1">
            <TabPane tab="实训大纲" key="1">
                <Layout >
                    <Sider className="site-layout-background" width={260}>
                        <Menu
                            className={styles.ant_menu}
                            mode="inline"
                            defaultSelectedKeys={['1']}
                            defaultOpenKeys={['sub1']}
                            style={{ height: '100%' }}
                        >
                            {/* {
                                TrainingSyllabus.map((item, index) => {
                                    return <SubMenu key={index} title={item.label}>
                                        {
                                            item.children.map((_item1: any) => {
                                                return <Menu.Item key={_item1.value}>{_item1.label}</Menu.Item>
                                            })
                                        }
                                    </SubMenu>
                                })
                            } */}
                        </Menu>
                    </Sider>
                    <Content style={{ padding: '0 24px', minHeight: 280 }}>


                    </Content>
                </Layout>
            </TabPane>
            <TabPane tab="实训任务" key="2">
                <Table rowKey='id' columns={column}></Table>
            </TabPane>
            <TabPane tab="项目资源" key="3">
                <Layout>
                    <Content >
                        <Layout >
                            <Sider className="site-layout-background" width={260}>
                                <Menu
                                    className={styles.ant_menu}
                                    mode="inline"
                                    defaultSelectedKeys={['1']}
                                    defaultOpenKeys={['sub1']}
                                    style={{ height: '100%' }}
                                >
                                    {
                                        ProjectResourcesList.map((item, index) => {
                                            return <SubMenu key={index} title={item.label}>
                                                {
                                                    item.children.map((_item1: any, index1: any) => {
                                                        return <Menu.Item key={_item1.value}>{_item1.label}</Menu.Item>
                                                    })
                                                }
                                            </SubMenu>
                                        })
                                    }
                                </Menu>
                            </Sider>
                            <p style={{ marginLeft: 100, marginTop: 50, fontSize: 20, color: '#ccc' }}>暂无数据</p>
                        </Layout>
                    </Content>
                </Layout>
            </TabPane>
            <TabPane tab="实训环境" key="4">
                <p style={{ marginLeft: 100, marginTop: 50, fontSize: 20, color: '#ccc' }}>暂无数据</p>
            </TabPane>
            <TabPane tab="前置项目" key="5">
                <p style={{ marginLeft: 100, marginTop: 50, fontSize: 20, color: '#ccc' }}>暂无数据</p>
            </TabPane>
        </Tabs>
    );
    //实训大纲
    let [TrainingSyllabus, setTrainingSyllabus] = useState<TrainingSyllabusList[]>([]);
    useEffect(() => {
        getTrainingSyllabus().then(ok => {
            setTrainingSyllabus(ok.data)
        })
    }, []);
    //实训任务
    const column = [
        {
            title: '任务名称',
            dataIndex: 'taskName',
        },
        {
            title: '考核标准',
            dataIndex: 'assessmentStandard',
        },
        {
            title: '步骤数量',
            dataIndex: 'steptCount',
        },
        {
            title: '推荐工期',
            dataIndex: 'subTime',
        }];
    //项目资源
    let [ProjectResourcesList, setProjectResourcesList] = useState<ProjectResourcesList[]>([]);
    useEffect(() => {
        getProjectResources().then(ok => {
            setProjectResourcesList(ok.data)
        })
    }, []);
    //发布评论
    const success = () => {
        message.success('发布成功');
    };
    const addContent = (values: any) => {
        EventFun(values);
    };
    async function EventFun(values: any) {
        await Postcomment({ ...projectKu.addItem, discussDesc: values.discussDesc, proId: id });
        await get();
        success();
    };
    return <div className={styles.projectDetail}>
        <div className={styles.left}>
            <div className={styles.title}>
                {
                    details ? <div>
                        <span style={{ fontSize: 20, fontWeight: 600 }}>标题:{details.description}</span>
                        <span>{details.discussCount}人学过</span>
                        <span>{details.favorCount}人关注</span>
                        <span>作者:{details.authorName}</span>
                    </div> :
                        <div>
                            <span>人学过</span>
                            <span>人关注</span>
                            <span>作者:</span>
                        </div>
                }
            </div>
            <div className={styles.tabs}>
                <Demo />
            </div>
            <div className={styles.content}>
                <p>实训评论({contentLen})</p>
                <div className={styles.btn}>
                    <dl>
                        <dt>{
                            content[0] && <img src={`http://111.203.59.61:8060${content[0].userPictureUrl}`} style={{ width: 48, height: 48, borderRadius: '50%' }} />
                        }
                        </dt>
                        <dd>
                            <Form
                                onFinish={addContent}
                            >
                                <Form.Item name="discussDesc">
                                    <TextArea rows={4} />
                                </Form.Item>
                                <Form.Item>
                                    <Button type="primary" htmlType="submit">发布评论</Button>
                                </Form.Item>
                            </Form>
                        </dd>
                    </dl>
                </div>
                <div className={styles.c2}>
                    {
                        content.map((item, index) => {
                            return <dl key={index}>
                                <dt><img src={`http://111.203.59.61:8060${item.userPictureUrl}`} style={{ width: 48, height: 48, borderRadius: '50%' }} /></dt>
                                <dd>
                                    <p>{item.disReplyid}</p>
                                    <p style={{ wordBreak: 'break-all' }}>{item.disReplycontent}</p>
                                    <p>{item.replyTime}</p>
                                </dd>
                            </dl>
                        })
                    }
                </div>
                <div style={{ width: 880, height: 80, display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                    <Pagination
                        defaultCurrent={1}
                        onChange={(e) => { setPageNum(e) }}
                        total={contentLen} size="default"
                        showSizeChanger showQuickJumper pageSize={10} pageSizeOptions={["10"]} />
                </div>
            </div>
        </div>
        <div className={styles.right}>
            <div className={styles.img}>
                <img src={`http://111.203.59.61:8060${img}`} style={{ width: 260, height: 160 }} />
            </div>
            <div className={styles.info}>
                <p>指导教师</p>
                <p>
                    <img src={`http://111.203.59.61:8060${info.authorPictureUrl}`} style={{ width: 48, height: 48, borderRadius: '50%' }} />
                    <span>{info.authorName}</span>
                </p>
            </div>
        </div>
    </div>
}
export default observer(projectDetail)